<template>
  <div>
    <div class="table-page-search-wrapper" v-if="isShow">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <template v-for="(item, i) in searchData">
            <a-col :xl="6" :lg="7" :md="8" :sm="24" :key="i" v-if="i < 3 || !isCollapse">
              <a-form-item :label="item.fieldTxt" v-if="item.searchMode === 'single'" style="padding: 4px 0px">
                <a-input type="text" v-if="item.fieldType === 'String'" v-model="item.value" :placeholder="'请输入' + item.fieldTxt" />
                <a-input
                  type="number"
                  v-else-if="item.fieldType === 'Integer' || item.fieldType === 'Long'"
                  v-model="item.value"
                  :placeholder="'请输入' + item.fieldTxt"
                />
                <a-date-picker
                  v-else-if="item.fieldType === 'Date'"
                  format="YYYY-MM-DD"
                  v-model="item.value"
                  :placeholder="'请输入' + item.fieldTxt"
                />
              </a-form-item>
              <a-form-item :label="item.fieldTxt" v-else style="margin-bottom: 0; padding: 4px 0px">
                <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 20px)', 'margin-right': '0px' }">
                  <a-input type="text" v-if="item.fieldType === 'String'" v-model="item.value[0]" :placeholder="'请输入' + item.fieldTxt" />
                  <a-input
                    type="number"
                    v-else-if="item.fieldType === 'Integer' || item.fieldType === 'Long'"
                    v-model="item.value[0]"
                    :placeholder="'请输入' + item.fieldTxt"
                  />
                  <a-date-picker
                    v-else-if="item.fieldType === 'Date'"
                    format="YYYY-MM-DD"
                    v-model="item.value[0]"
                    :placeholder="'请输入' + item.fieldTxt"
                  />
                </a-form-item>
                <span style="padding: 0px 8px">~</span>
                <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 20px)', 'margin-right': '0px' }">
                  <a-input type="text" v-if="item.fieldType === 'String'" v-model="item.value[1]" :placeholder="'请输入' + item.fieldTxt" />
                  <a-input
                    type="number"
                    v-else-if="item.fieldType === 'Integer' || item.fieldType === 'Long'"
                    v-model="item.value[1]"
                    :placeholder="'请输入' + item.fieldTxt"
                  />
                  <a-date-picker
                    v-else-if="item.fieldType === 'Date'"
                    format="YYYY-MM-DD"
                    v-model="item.value[1]"
                    :placeholder="'请输入' + item.fieldTxt"
                  />
                </a-form-item>
              </a-form-item>
            </a-col>
          </template>
          <a-col :xl="6" :lg="7" :md="8" :sm="24" style="padding: 4px 0px">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
              <a-button type="primary" icon="reload" style="margin-left: 8px" @click="searchReset">重置</a-button>
              <a href="javascript:;" v-if="searchData.length > 3" @click="handlerCollapse">
                {{ isCollapse ? '展开' : '收回' }}
                <a-icon :type="isCollapse ? 'down' : 'up'" />
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, watch, onMounted } from 'vue';

  export default defineComponent({
    name: 'GroupSearch',
    props: {
      items: {
        type: Array,
        default: () => [],
      },
    },
    setup(props, { emit }) {
      const searchData = ref<any>([]); // 查询数据
      const isShow = ref<any>(false); // 控制组件是否显示
      const isCollapse = ref<any>(true);
      const isRestSearchData = ref<any>(true); // 控制是否重新渲染查询组件

      watch(
        props.items,
        (newValue, oldValue) => {
          console.log('值发生了变更', newValue, oldValue);
          getSearchData();
        },
        { deep: true }
      );

      onMounted(getSearchData);

      function handlerCollapse() {
        isCollapse.value = !isCollapse.value;
      }

      function searchReset() {
        searchData.value.forEach((item) => {
          if (item.searchMode === 'single') {
            item.value = null;
          } else {
            item.value = [null, null];
          }
        });

        emit('chartLoad', searchData);
      }

      function searchQuery() {
        isRestSearchData.value = false;
        emit('chartLoad', searchData);
      }

      function getSearchData() {
        if (!isRestSearchData.value) {
          return false;
        }
        isRestSearchData.value = true;
        searchData.value = [];
        const itemsCopy = JSON.parse(JSON.stringify(props.items));
        itemsCopy.forEach((item, i) => {
          if (item.searchFlag === 1) {
            if (item.searchMode === 'single' || !item.searchMode) {
              searchData.value.push({
                value: null,
                fieldTxt: item.fieldTxt,
                fieldType: item.fieldType,
                fieldName: item.fieldName,
                searchMode: 'single',
              });
            } else if (item.searchMode === 'group') {
              searchData.value.push({
                value: [null, null],
                fieldTxt: item.fieldTxt,
                fieldType: item.fieldType,
                fieldName: item.fieldName,
                searchMode: 'group',
              });
            }
          }
        });
        if (searchData.value.length > 0) {
          isShow.value = true;
        }
      }

      return {
        searchData,
        isShow,
        isCollapse,
        isRestSearchData,
        handlerCollapse,
        searchReset,
        searchQuery,
      };
    },
  });
</script>
<style scoped>
  .table-page-search-wrapper {
    padding: 10px 20px;
    margin-bottom: 20px;
    background-color: #fff;
  }
  .table-page-search-wrapper .ant-form-inline .ant-form-item,
  .table-page-search-submitButtons {
    margin-right: 16px;
    margin-bottom: 0;
  }
  .table-page-search-wrapper .ant-calendar-picker {
    width: 100%;
  }
</style>
